<template>
	<view class="outer_box">
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<view class="background">
				<view class="describe-status">
					<view class="" v-if="orderInfo.orderStatus==-1">
						订单待付款~~~
					</view>
					<view class="" v-if="orderInfo.orderStatus==-1">
						超过30分钟自动取消，请在28分15秒内完成支付
					</view>
					<view class="" v-if="orderInfo.orderStatus==4">
						订单已取消~~~
					</view>
					<view class="" v-if="orderInfo.orderStatus==3">
						支付超时，订单已取消
					</view>
					<view class="" v-if="orderInfo.isTakes==3&&orderInfo.takesState==1&&gooditem.orderStatus == 1">
						等待卖家发货~~~
					</view>
					<view class="" v-if="orderInfo.isTakes==3&&orderInfo.takesState==1&&gooditem.orderStatus == 1">
						您的订单已提交，请耐心等候
					</view>
					<view class="" v-if="orderInfo.isTakes==3&&orderInfo.takesState==2&&gooditem.orderStatus == 1">
						卖家已发货~~~
					</view>
					<view class="" v-if="orderInfo.orderStatus==2">
						超过7天订单将自动确认收货
					</view>
				</view>
				<view class="address-card">
					<addAddress>
						<view class="address-info">
							<view>{{orderInfo.name}} {{orderInfo.phone}}</view>
							<view>{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.address}}</view>
						</view>
					</addAddress>
				</view>

			</view>
			<view class="product-card">
				<view class="">
					<shopTitle color='#666' :content="orderInfo.shopName"></shopTitle>
					<productInfo :productInfo='item' class="product-info" v-for="(item,index) in orderInfo.goodSkuDto" :key="index">
						<view slot='sku' class="sku"></view>
						<view class="number" slot='number-btn'>
							x{{item.number}}
						</view>
						<view slot='price' class="price">￥{{item.goodsPrice}}</view>
					</productInfo>
				</view>

			</view>
			<view class="money-card">
				<view class="price-freight">
					<view class="">商品金额</view>
					<view class="">￥{{orderInfo.goodsPrice}}</view>
				</view>
				<view class="price-freight">
					<view class="">运费</view>
					<view class="">￥0.00</view>
				</view>
				<view class="line"></view>
				<view class="price-real">
					<view class="">实付款：</view>
					<view class="">￥{{orderInfo.goodsPrice}}</view>
				</view>

			</view>
			<view class="order-card">
				<view class="order">
					<view class="">订单编号</view>
					<view class="">{{orderInfo.orderNumber}}</view>
					<view class="">
						<view class="copy-btn" @tap="copy()">复制</view>
					</view>
				</view>
				<view class="time">
					<view class="">下单时间</view>
					<view class="">{{orderInfo.createTime | dateFormatYear}}</view>
					<view class=""></view>
				</view>
				<!-- <view class="remark">
					<view class="">订单备注</view>
					<view class="">希望能尽快发货，比较着急使用</view>
					<view class=""></view>
				</view> -->


			</view>
		</scroll-view>

		<view class="pay-box">
			<view class="btn-box">
				<!-- <view class="" v-if="orderInfo.isTakes==3">
					<view class="grey" v-if="orderInfo.takesState==2" @tap="openLogistics(orderInfo.orderNumber)">
						查看物流
					</view>
				</view> -->
				<view class="" v-if="orderInfo.isTakes==3">
					<view class="yellow" v-if="orderInfo.takesState==2" @tap='updateOrderState(gooditem,2)'>
						确认收货
					</view>
				</view>
				<view v-if="orderInfo.orderStatus==-1" class="gray" @tap="updateOrderState(gooditem,4)">
					取消订单
				</view>
				<view class="yellow" @tap="open()" v-if="orderInfo.orderStatus==-1">
					立即付款
				</view>
				<view v-if="orderInfo.orderStatus==4" class="gray" @tap='deleteOrder(-2)'>
					删除订单
				</view>
				<view class="yellow"  v-if="orderInfo.orderStatus==4" @tap='againBuy'>
					重新购买
				</view>
				<view v-if="orderInfo.orderStatus==1" class="gray" @tap="Jumpredfund(orderInfo.orderNumber)">
					申请退款
				</view>
				<!-- <view class="yellow"  v-if="orderInfo.orderStatus==1">
					提醒发货
				</view> -->
			</view>


		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥ {{orderInfo.goodsPrice}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{orderInfo.goodsPrice}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='pay()'>
					支付
				</button>
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				addressList:[],
				address:'',
				orderInfo:'',
				height: 500,
				productInfo:{
					title:'进口苹果',
					image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku:'1000g',
					price:'30'
				}
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(120)
				}
			})
		},
		onLoad(parameter) {
			this.getOrdersInfo(parameter.orderNumber)
		},
		onShow() {
			this.getUserInfo()
			this.getAddressList()
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			// 再次购买
			againBuy() {
				uni.navigateTo({
					url: '../shop/shopInfo?shopId=' + this.orderInfo.shopId
				})
			},
			deleteOrder() {
				this.$api.deleteOrder({
					orderNumber: this.orderInfo.orderNumber
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						uni.$emit("carData", 1)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1100);
			
					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			//取消订单 确认收货
			updateOrderState(state,num) { 
				let takesState = ''
				let userOrderStatus = ''
				let arr = []
				if (num == 2) {
					takesState = 3
				}
				arr.push(state.orderNumber)
				this.$api.updateOrderState({
					orderNo: arr,
					orderStatus: num,
					// takesState: takesState
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						this.changeTap('')
						// uni.$emit("carData", 1)
						// setTimeout(function() {
						// 	uni.navigateBack({
						// 		delta: 1
						// 	});
						// }, 1100);
			
					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			Jumpredfund(orderNumber){
				uni.navigateTo({
					url:'./applyRefund?orderNumber='+orderNumber	
				})
			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						_this.addressList = res.data.data
						if (_this.addressList.length > 0) {
							_this.address = _this.addressList[0]
						} 
					}
				})
			},
			pay() {
				//选择支付方式
				let type=3
				// if(this.current===0){
				// 	type=1
				// }
				// if(this.current===1){
				// 	type=2
				// }
				let _this = this;
				uni.showLoading({
					title: '正在支付...',
					mask: true
				})
				let arr = []
				arr.push(this.orderInfo.orderNumber)
				this.$api.payOrder({
					orderNo: arr,
					type:3
				}).then((res) => {
					uni.hideLoading()
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							this.close()
							// uni.navigateTo({
							// 	url: '../pay/pay-state'
							// });
						
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								// _this.closePup()
								uni.navigateTo({
									url: '../pay/pay'
								});
							}, 1000);
						
						}
					}

					
			
				})
			
			},
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			getOrdersInfo(orderNumber) {
				this.$api.getOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						console.log(res.data)
						this.orderInfo = res.data.dataMap
			
					} else {
			
					}
			
				})
			},
			openLogistics(orderNumber){
				uni.navigateTo({
					url:'../logistics/logistics?orderNumber='+orderNumber
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: this.orderInfo.orderNumber, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.outer_box{
		background-color: #f8f8f8;
	}
	.popup{
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.popup_pay{
			width: 750rpx;
			height: 300rpx;
			text-align: center;
			view:nth-child(1){
				margin-top: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
			view:nth-child(2){
				font-size: 56rpx;
				font-weight: 400;
				color: #FF8308;
			}
		}
		.item{
			margin-top: 30rpx;
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background: #EEEEEE;
			border-radius: 1rpx;
			margin-top: 30rpx;
		}
		.paymentBtn{
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	page {
		background-color: #f8f8f8;
	}

	.outer_box {
		display: flex;
		flex-direction: column;

		.pay-box {
			display: flex;
			margin: 4rpx 0;
			height: 110rpx;
			width: 100%;
			box-shadow: 0px -1px 0px 0px #EEEEEE;
			border-bottom: 2rpx solid #EEEEEE;
			justify-content: flex-end;
			background-color: #fff;

			.btn-box {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				view {
					width: 160rpx;
					height: 68rpx;
					font-size: 24rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 34rpx;
					margin-left: 10rpxs;
				}

				.yellow {
					margin-left: 15rpx;
					width: 160rpx;
					height: 68rpx;
					background: #FFBD66;
					border-radius: 34rpx;
					color: #FEFEFE;
				}

				.gray {
					margin-left: 15rpx;
					background: #FFFFFF;
					border: 2rpx solid #CCCCCC;
					color: #999999;

				}
			}
		}

		.product-info {
			margin-top: 20rpx;
			.sku{
				color: #999999;
				font-size: 24rpx;
			}
			.price {
				font-size: 36rpx;
				font-weight: bold;
				color: #FF8308;
			}
		}

		.order-card {
			margin: 20rpx auto 0 auto;
			width: 86%;
			min-height: 100rpx;
			background: #FFFFFF;
			padding: 20rpx 25rpx;

			.remark {
				view:nth-child(2) {
					font-weight: bold !important;
				}
			}

			.order,
			.time,
			.remark {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				view:nth-child(1) {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}

				view:nth-child(2) {
					flex: 3;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				view:nth-child(3) {
					flex: 0.8;

					.copy-btn {
						margin: 0 auto;
						width: 90rpx;
						height: 40rpx;
						background: #FFFFFF;
						border: 2rpx solid #999999;
						border-radius: 24rpx;
						font-weight: 400;
						color: #666666;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}

		}

		.money-card {
			margin: 20rpx auto 0 auto;
			width: 86%;
			min-height: 200rpx;
			background: #FFFFFF;
			padding: 20rpx 25rpx;

			.line {
				width: 100%;
				height: 2rpx;
				background-color: #EEEEEE;
				margin: 20rpx 0;
			}

			.price-real {
				display: flex;
				justify-content: space-between;

				view:nth-child(1) {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				view:nth-child(2) {
					font-size: 32rpx;
					font-weight: bold;
					color: #FF8308;
				}
			}

			.price-freight {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				view:nth-child(1) {
					color: #666666;
				}

				view:nth-child(2) {
					color: #999999;
					font-weight: 400;
				}
			}
		}

		.product-card {
			width: 86%;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 30rpx auto 0 auto;
			padding: 20rpx 25rpx;

			.number {
				color: #333333;
				font-weight: bold;
			}
		}

		.background {
			width: 100%;
			height: 320rpx;
			background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/background.png);
			background-size: 100%;
			position: relative;
			margin-bottom: 30rpx;

			.address-card {
				margin: 30rpx auto 0 auto;
				padding: 20rpx 0;
				width: 92%;
				height: 123rpx;
				background: #FFFFFF;
				border-radius: 12rpx;

				.address-info {
					margin: 0 auto;
					width: 90%;

					view:nth-child(1) {
						font-weight: bold;
						color: #333333;
						font-size: 32rpx;
					}

					view:nth-child(2) {
						margin-top: 10rpx;
						font-weight: bold;
						color: #666666;
						font-size: 28rpx;
					}
				}
			}

			.describe-status {
				display: flex;
				flex-direction: column;
				margin: 0 auto;
				width: 92%;
				color: #fff;

				view:nth-child(1) {
					font-size: 36rpx;
					margin-top: 30rpx;

				}

				view:nth-child(2) {
					font-size: 24rpx;
					margin-top: 20rpx;

				}
			}
		}
	}
</style>
